import React from 'react';
import {Layout, Modal} from 'antd';
import BaseComponent from "components/Base/BaseComponent";
import Button from "components/Base/Button";
import Toolbar from "components/Base/Toolbar";
import DataTable from "components/Base/DataTable";
import ModalForm from "components/Base/Modal/ModalForm";
import SearchBar from "components/Base/SearchBar/SearchBar";
import './index.less';
import PropTypes from "prop-types";
import $$ from 'utils';

const {Content, Footer, Header} = Layout;

export default class extends BaseComponent {

  static propTypes = {
    showToolbar: PropTypes.bool,
    tableColumns: PropTypes.func,
    searchColumns: PropTypes.func,
    detailSearchColumns: PropTypes.array,
    namespace: PropTypes.string,
    pagination: PropTypes.bool,
    selectType: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    init: PropTypes.func,
    disabledAdd: PropTypes.bool,
    showAddDelete: PropTypes.bool,
    align: PropTypes.string,
    showNum: PropTypes.bool,
    searchType: PropTypes.string,
    searchCols: PropTypes.object,
  };

  static defaultProps = {
    align: 'center',
    searchType: 'inline',
    searchCols: {span: 8},
  }

  state = {
    record: null,
    visible: false,
    rows: [],
    pageNum: 1,
    size: 10,
    filters: null,
    sorter: null,
  };


  componentDidMount() {

    !!this.props.init ?
      this.props.init() :
      this.dispatch({
        type: `${this.getNamespace()}/init`,
        payload: {
          notice: this.showMsg
        },
      })
  }

  /**
   * 新增
   */
  onAdd = () => {

    this.setState({
      record: null,
      visible: true
    });
  };

  /**
   * 修改
   * @param {object} 表单记录
   */
  onUpdate(record) {

    this.setState({
      record,
      visible: true
    });
  };

  /**
   * 删除
   * @param {object | array} 表单记录, 批量删除时为数组
   */
  onDelete = record => {
    if (!record) return;
    if ($$.isArray(record) && !record.length) return;

    const content = `您是否要删除这${
      $$.isArray(record) ? record.length : ''
    }项？`;

    Modal.confirm({
      title: '注意',
      content,
      onOk: () => {
        this.delete($$.isArray(record) ? record : [record]);
      },
    });
  };

  onSearch = (values, isReset) => {
    const {pageNum, size, filters, sorter} = this.state;

    Object.keys(values).forEach(key => {
      values[key] = !!values[key] ? values[key] : null
    });

    console.log("onSearch", values);

    const f = {...filters, ...values};
    this.setState({filters: f});

    this.getPageInfo({pageNum, pageSize: size, filters: f, sorter});
  }

  /**
   * 添加或者更新数据
   */
  addAndModify = (value, record) => {

    console.log("addAndModify", value, record);

    if (!!record){
      value = record;
    }

    let v = {};
    Object.keys(value).forEach(key => {
      !!value[key] && (v[key] = value[key])
    });

    this.dispatch({
      type: `${this.getNamespace()}/save`,
      payload: {
        value: v,
        notice: this.showMsg,
        success: () => {
          this.getPageInfo(this.state);
          this.setState({
            record: null,
            visible: false
          });
        }
      }
    });
  }

  delete(values) {
    this.dispatch({
      type: `${this.getNamespace()}/delete`,
      payload: {
        values,
        notice: this.showMsg,
        success: () => {
          this.getPageInfo(this.state);
        }
      }
    });
  }

  getTableColumns() {
    return !!this.props.tableColumns && this.props.tableColumns(this);
  }

  getSearchColumns() {
    return !!this.props.searchColumns && this.props.searchColumns(this);
  }

  getDetailSearchColumns() {
    return this.props.detailSearchColumns;
  }

  getOtherView() {

  }

  render() {

    const {page, loading, changing} = this.getModel(this.getNamespace());
    const columns = this.getTableColumns();
    const {rows, record, visible} = this.state;
    const {pagination, selectType, disabledAdd, showAddDelete, align, showNum, searchType, searchCols,...otherProp} = this.props;

    !!align && columns.forEach(column => {
      if (!!column.tableItem)
        column.tableItem.align = align;
    });


    const dataTableProps = {
      loading,
      columns,
      rowKey: 'id',
      showNum: showNum === undefined ? true : showNum,
      selectType: selectType === 'none' ? undefined : selectType,
      dataItems: page,
      pagination: pagination === undefined ? true : pagination,
      isScroll: true,
      bordered: true,
      onSelect: (keys, rows) => {
        this.setState({rows});
      },
      onChange: (data) => {

        console.log("onChange", data);
        const {pageNum, pageSize,  sorter} = data;
        const {filters} = this.state;

        let f = {};
        if (!!filters) {
          Object.keys(filters).forEach(key => {
            !!filters[key] && (f[key] = filters[key])
          });
        }

        this.setState({pageNum, pageSize, filters: f, sorter});
        this.getPageInfo({pageNum, pageSize, filters: f, sorter});
      },
      ...otherProp,
    };

    const modalFormProps = {
      loading: changing,
      record,
      visible,
      columns,
      modalOpts: {
        width: 700
      },
      onCancel: () => {
        this.setState({
          record: null,
          visible: false
        });
      },
      // 新增、修改都会进到这个方法中，
      // 可以使用主键或是否有record来区分状态
      onSubmit: value => {
        this.addAndModify(value);
      }
    };

    const searchColumns = this.getSearchColumns();
    const detailSearchColumns = this.getDetailSearchColumns();

    return (
      <Layout className="crud-page">
        <Header>
          {this.props.showToolbar != false &&
          <Toolbar
            appendLeft={(!!showAddDelete || showAddDelete === undefined) &&
            (
              <Button.Group>
                <Button type="primary" icon="plus" disabled={disabledAdd === undefined ? false : disabledAdd}
                        onClick={this.onAdd}>
                  新增
                </Button>
                <Button icon="delete" disabled={!rows || rows.length == 0}
                        onClick={() => this.onDelete(rows)}>
                  删除
                </Button>
              </Button.Group>
            )
            }

            pullDown={!!detailSearchColumns &&
            <SearchBar type="grid" columns={detailSearchColumns} onSearch={this.onSearch}/>}
          >
            {!!searchColumns && <SearchBar type={searchType} cols={searchCols}
                                           columns={searchColumns} onSearch={this.onSearch}/>}
          </Toolbar>
          }
        </Header>
        <Content>
          <ModalForm {...modalFormProps} />
          <DataTable {...dataTableProps}/>
          {this.getOtherView()}
        </Content>

      </Layout>
    );
  }

}
